3 <title>The source code</title>
\r
4 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
\r
5 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
\r
7 <body onload="prettyPrint();">
\r
8 <pre class="prettyprint lang-js">Ext.ux.Portal = Ext.extend(Ext.Panel, {
\r
12 defaultType : 'portalcolumn',
\r
14 initComponent : function(){
\r
15 Ext.ux.Portal.superclass.initComponent.call(this);
\r
18 beforedragover:true,
\r
25 initEvents : function(){
\r
26 Ext.ux.Portal.superclass.initEvents.call(this);
\r
27 this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);
\r
30 beforeDestroy : function() {
\r
34 Ext.ux.Portal.superclass.beforeDestroy.call(this);
\r
38 Ext.reg('portal', Ext.ux.Portal);
\r
41 Ext.ux.Portal.DropZone = function(portal, cfg){
\r
42 this.portal = portal;
\r
43 Ext.dd.ScrollManager.register(portal.body);
\r
44 Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
\r
45 portal.body.ddScrollConfig = this.ddScrollConfig;
\r
48 Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {
\r
56 createEvent : function(dd, e, data, col, c, pos){
\r
58 portal: this.portal,
\r
66 status: this.dropAllowed
\r
70 notifyOver : function(dd, e, data){
\r
71 var xy = e.getXY(), portal = this.portal, px = dd.proxy;
\r
73 // case column widths
\r
75 this.grid = this.getGrid();
\r
78 // handle case scroll where scrollbars appear during drag
\r
79 var cw = portal.body.dom.clientWidth;
\r
82 }else if(this.lastCW != cw){
\r
85 this.grid = this.getGrid();
\r
89 var col = 0, xs = this.grid.columnX, cmatch = false;
\r
90 for(var len = xs.length; col < len; col++){
\r
91 if(xy[0] < (xs[col].x + xs[col].w)){
\r
96 // no match, fix last index
\r
101 // find insert position
\r
102 var p, match = false, pos = 0,
\r
103 c = portal.items.itemAt(col),
\r
104 items = c.items.items, overSelf = false;
\r
106 for(var len = items.length; pos < len; pos++){
\r
108 var h = p.el.getHeight();
\r
112 else if((p.el.getY()+(h/2)) > xy[1]){
\r
118 pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);
\r
119 var overEvent = this.createEvent(dd, e, data, col, c, pos);
\r
121 if(portal.fireEvent('validatedrop', overEvent) !== false &&
\r
122 portal.fireEvent('beforedragover', overEvent) !== false){
\r
124 // make sure proxy width is fluid
\r
125 px.getProxy().setWidth('auto');
\r
128 px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
\r
130 px.moveProxy(c.el.dom, null);
\r
133 this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};
\r
134 this.scrollPos = portal.body.getScroll();
\r
136 portal.fireEvent('dragover', overEvent);
\r
138 return overEvent.status;
\r
140 return overEvent.status;
\r
145 notifyOut : function(){
\r
149 notifyDrop : function(dd, e, data){
\r
154 var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;
\r
156 var dropEvent = this.createEvent(dd, e, data, col, c,
\r
157 pos !== false ? pos : c.items.getCount());
\r
159 if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&
\r
160 this.portal.fireEvent('beforedrop', dropEvent) !== false){
\r
162 dd.proxy.getProxy().remove();
\r
163 dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
\r
166 if(c == dd.panel.ownerCt && (c.items.items.indexOf(dd.panel) <= pos)){
\r
169 c.insert(pos, dd.panel);
\r
176 this.portal.fireEvent('drop', dropEvent);
\r
178 // scroll position is lost on drop, fix it
\r
179 var st = this.scrollPos.top;
\r
181 var d = this.portal.body.dom;
\r
182 setTimeout(function(){
\r
188 delete this.lastPos;
\r
191 // internal cache of body and column coords
\r
192 getGrid : function(){
\r
193 var box = this.portal.bwrap.getBox();
\r
195 this.portal.items.each(function(c){
\r
196 box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
\r
201 // unregister the dropzone from ScrollManager
\r
202 unreg: function() {
\r
203 //Ext.dd.ScrollManager.unregister(this.portal.body);
\r
204 Ext.ux.Portal.DropZone.superclass.unreg.call(this);
\r